﻿<template>
  <div>
    <h1>路由说明</h1>
    <p>{{ steps[currentStep] }}</p>
    <button @click="nextStep">下一步</button>
    <button @click="click">跳转到首页</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {useRoute, useRouter} from "vue-router";

// 教程步骤
const steps = [
  '在 Vue 3 中使用 vue-router，useRouter 和 useRoute 是两个组合式 API，用于处理路由相关的操作。',
  'useRouter 是一个组合式 API，返回当前应用的路由实例。',
  'useRoute 是一个组合式 API，返回当前激活的路由对象。',
  '你可以使用这个对象来访问当前路由的路径、参数、查询参数、名称等信息。'
]
const route = useRoute();
console.log(route)
console.log(route.query)
console.log(route.params)
console.log(route.path)
console.log(route.fullPath)
const router = useRouter();
const click= () => {
  router.push('/')
}
// 当前步骤
const currentStep = ref(0)

// 下一步方法
function nextStep() {
  if (currentStep.value < steps.length - 1) {
    currentStep.value++
  }
}
</script>